<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:comps="http://java.sun.com/jsf/composite/comps"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" >

    <body>

        <ui:composition template="./../resources/templates/newTemplate.xhtml">
            
            <ui:define name="left" >

                <p:panel header="Categoria" styleClass="panelFiltro" >
                    <h:form id="categoriaForm">
                        
                        <p:tree value="#{resultadosBean.raizCategorias}" var="node" id="checkboxTree" styleClass="categoriaTree"
                                selectionMode="checkbox" selection="#{resultadosBean.categoriasSeleccionadas}" >
                            <p:ajax event="select" update=":tableForm:grid" />
                            <p:ajax event="unselect" update=":tableForm:grid" />
                            
                            <p:treeNode>
                                <h:outputText value="#{node.nombre}" />
                            </p:treeNode>
                        </p:tree>
                        
                    </h:form>
                </p:panel>

                <p:panel header="Barrio" styleClass="panelFiltro" >
                    <h:form>
                        <p:commandLink value="Cualquiera" action="#{resultadosBean.noFiltrarUbicacion}"
                                       update="@form :tableForm:grid :categoriaForm"
                                       styleClass="#{resultadosBean.ubicacion == null ? 'filtroActual': null}" /> 
                        <br/><br/>
                        <h:panelGrid columns="2" >
                            <p:inputText value="#{resultadosBean.ubicacion}" style="width:130px;" />
                            <p:commandButton actionListener="#{resultadosBean.filtrarUbicacion}"
                                             update="@form :tableForm:grid :categoriaForm" icon="ui-icon ui-icon-search" />
                        </h:panelGrid>
                    </h:form>
                </p:panel>

                <p:panel header="Precio por día" styleClass="panelFiltro" >
                    <h:form id="precioForm" style="margin-top: 10px">
                        <h:inputText id="range" value="#{resultadosBean.range}" style="display:none" />
                        <p:commandButton id="filtrar" actionListener="#{resultadosBean.filtrarPrecio}" 
                                         update=":tableForm:grid :categoriaForm" style="display:none;" />
                        <div id="slider-range"></div>
                        <input id="desde" style="float: left;width: 45px;text-align: left;border:none;" disabled="true" />
                        <input id="hasta" style="float: right;width: 45px;text-align: right;border:none;" disabled="true" />
                        <br/>
                        <script>
                            $(function() {
                                var minP = parseFloat('<h:outputText value="#{resultadosBean.precioMin}" />');
                                var maxP = parseFloat('<h:outputText value="#{resultadosBean.precioMax}" />');
                                $( "#slider-range" ).slider({
                                        range: true,
                                        min: minP,
                                        max: maxP,
                                        values: [minP, maxP],
                                        slide: function(event, ui) {
                                            $("#precioForm\\:range").val(ui.values[0] + "-" + ui.values[1]);
                                            $("#desde").val("$" + ui.values[0]);
                                            $("#hasta").val("$" + ui.values[1]);
                                        },  
                                        change: function(event, ui) {
                                            $("#precioForm\\:filtrar").click();
                                        }
                                });
                                $("#precioForm\\:range" ).val($("#slider-range").slider("values", 0) +
                                        "-" + $("#slider-range").slider("values", 1));
                                $("#desde" ).val("$" + $("#slider-range").slider("values", 0));
                                $("#hasta" ).val("$" + $("#slider-range").slider("values", 1));
                            });
                        </script>
                    </h:form>
                </p:panel>

            </ui:define>

            <ui:define name="principal">
                <div id="items" >
                    <h:form id="tableForm" >

                        <p:dataTable id="grid" value="#{resultadosBean.model}" var="pub" 
                                     rows="10" paginator="true" paginatorAlwaysVisible="false"
                                     paginatorPosition="bottom" 
                                     emptyMessage="No se encontraron publicaciones para el criterio de busqueda seleccionado."
                                     styleClass="itemsTable" >

                            <p:column>
                                <comps:itemInfo var="#{pub}" bean="#{resultadosBean}"
                                                property="publicacionSeleccionada" />
                            </p:column>

                        </p:dataTable>

                        <p:growl id="growl" globalOnly="true" />
                    </h:form>
                </div>
            </ui:define>

        </ui:composition>

    </body>
</html>
